<template>
  <div class="storer">
    <div class="storer_top">
      <img :src=" listData.avatarUrl" alt>
      <div class="top_right">
        <span>{{listData.nickname}}</span>
        <div class="right_bottom">
          <div class="bottom_social">
            <span>社交网络：</span>
            <span>个人介绍：{{listData.signature}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class='storer_bottom'>
        <span>歌单：</span>
        <div class='total'>
            <div class='list' v-for='item in playData' :key='item.id'>
                <img :src="item.coverImgUrl" alt="" >
                <h4>{{item.name}}</h4>
                <b>{{item.trackCount}}首</b>
            </div>
            
        </div>
    </div>
  </div>
</template>
<script>
import { userSonglist,playlist} from "@/api";
export default {
  data() {
    return {
      uid:"",
      listData: [],
      playData:[]

    };
  },
  created() {
    this.getList({ uid: this.$route.params.id });
     this.getPlayList({ uid: this.$route.params.id })
  },
  methods: {
    getList(data) {
      userSonglist(data).then(res => {
        this.listData = res.data.profile;
       
      });
    },
    getPlayList(data){
        playlist(data).then(res=>{
            this.playData=res.data.playlist
            // console.log(this.playData)
           
        })
    }
  }
};
</script>

<style>
.storer {
  width: 1200px;
  /* border: 1px solid black; */
  min-height: 550px;
  margin: 0 auto;
  padding-top: 24px;
}
.storer_top img {
  width: 220px;
  height: 220px;
  border: 1px solid #f0f0f0;
  margin-left: 36px;

  float: left;
}
.storer_top .top_right {
  float: left;
  margin-left: 30px;
  font-size: 22px;
}

.top_right .right_bottom {
  margin-top: 12px;
  width: 870px;
  height: 170px;
  border-top: 1px solid #f0f0f0;
}

.top_right .right_bottom .bottom_social span{
    font-size:12px;
    display: block;
    margin-top:15px;
}

.storer .storer_bottom{
    width:1200px;
    border-top: 1px solid #f0f0f0;
    margin-top:60px;
}
.storer .storer_bottom span{
    font-size:22px;
    margin-top:10px;
}
.storer .storer_bottom div{
    margin-top:40px;
  
}
.storer .storer_bottom span{
    float: left;
    font-weight:600

}
.storer .storer_bottom .total .list{
 float:left;
 margin-left:50px;
   width:134px;
   height: 200px;
    /* border:1px solid black; */
    text-align: center;
    /* margin:10px; */
}
.total .list img{
    width:134px;
    height:134px;
 
}
.total .list h4{
    font-size: 14px;
    margin-top:5px;
    font-weight:600
}
.total .list b{
    font-weight: 100;
    color:#7d7f80;
}
</style>